<nav class="navbar navbar-transparent navbar-absolute">
  <div class="container-fluid">
    <div class="collapse navbar-collapse">
      <div>
        <ul class="nav navbar-nav navbar-right">
          <li class="dropdown" [ngClass]="{'open': notification}" (click)="toggleNotification()">
            <a class="dropdown-toggle">
              <i class="fa fa-bell"></i>
              <span class="notification">5</span>
            </a>
            <ul class="dropdown-menu">
              <li>
                <a>Mike John responded to your email</a>
              </li>
              <li>
                <a>You have 5 new tasks</a>
              </li>
              <li>
                <a>You're now friend with Andrew</a>
              </li>
              <li>
                <a>Another Notification</a>
              </li>
              <li>
                <a>Another One</a>
              </li>
            </ul>
          </li>
          <li>
            <a routerLink="/admin/user/profile">
              <i class="fa fa-user"></i>
            </a>
          </li>
        </ul>
        <form class="navbar-form navbar-right" [formGroup]="searchForm" (ngSubmit)="search()">
          <div class="form-group form-search" [ngClass]="{'is-focused': searchInputFocus, 'is-empty': !keyword.value, 'has-danger': setClassSearch()}">
            <input class="form-control" placeholder="Search" type="text" (focus)="setSearchInputFocus()"  (blur)="setSearchInputBlur()" formControlName="keyword" #keyword maxlength="20">
          </div>
          <button class="btn btn-white btn-round btn-just-icon" type="submit">
            <i class="fa fa-search"></i>
          </button>
        </form>
      </div>
    </div>
  </div>
</nav>
